<template>
  <div class="home">
    <el-main>
      <el-row>
        <el-table :data="accountBookList" style="width: 100%" border v-loading="loading">
          <el-table-column prop="id" label="编号" min-width="100">
            <template slot-scope="scope">{{ scope.row.pk }}</template>
          </el-table-column>
          <el-table-column prop="name" label="金额" min-width="100">
            <template slot-scope="scope">{{ scope.row.fields.money }}</template>
          </el-table-column>
          <el-table-column prop="id" label="分类" min-width="100">
            <template slot-scope="scope">{{ scope.row.fields.categories }}</template>
          </el-table-column>
          <el-table-column prop="id" label="时间" min-width="100">
            <template slot-scope="scope">{{ scope.row.fields.created_at }}</template>
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next, jumper"
                          :total="pageCount" :currentPage.sync="page" :page-size="pageSize" @current-change="showAccountBook" >
        </el-pagination>
      </el-row>
    </el-main>
  </div>
</template>
<script>
export default {
  name: 'accountBook',
  data () {
    return {
      title: '账本',
      loading: false,
      page: 1,
      activeIndex: '1',
      direction: 'ltr',
      pageSize: 10,
      pageCount: 0,
      accountBookList: []
    }
  },
  mounted: function () {
    this.showAccountBook()
  },
  methods: {
    showAccountBook () {
      this.loading = true
      this.$http.get('/api/account/book/getlist').then((response) => {
        var res = JSON.parse(response.bodyText)
        this.loading = false
        if (res.status === 1) {
          this.pageCount = res.count
          this.pageSize = res.count
          this.accountBookList = res.data.data
        } else {
          this.$message.error('分类列表获取失败')
          console.log(res['msg'])
        }
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.echarts { width: 100%; height: 400px;}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}
</style>
